<template>
  <div class="banner">
    <div class="content">
      <div class="selectCourse"
           :style="courseList.length > 0 ? 'display: flex;justify-content: space-between;' : 'display: flex;justify-content: flex-end'">
        <el-select v-if="courseList.length > 0" @change="changeCourse" v-model="activeCourseId" class="course-type-select"
                   placeholder="国际薪税师">
          <el-option
              v-for="item in courseList"
              :key="String(item.courseID)"
              :label="item.name"
              :value="String(item.courseID)"
          />
          <template #prefix>
            <span style="color: rgba(2, 122, 213, 1)">当前课程</span>
          </template>
        </el-select>
        <div style="display: flex;justify-content: space-between;" :style="!courseList.length ? 'width:100%':''">
          <slot name="freeSelect"></slot>
          <slot name="search"></slot>
        </div>
      </div>
      <div v-show="isIndex" class="banner-body">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="left-model">
              <div class="demo">
                <div class="title">
                  <div style="padding: 10px 20px;color: rgba(255, 255, 255, 1);font-size: 16px;font-weight: 400;"
                       @click="studyWatch">最近在看
                  </div>
                </div>
                <div class="content-span">
                  <div v-if="learnContent && learnContent.videoLogs && learnContent.videoLogs.length">
                    <p @click="toRecentStudyWatch(item)" v-for="item in learnContent.videoLogs">
                      {{ item.name }}
                    </p>
                  </div>
                  <div v-else class="not-learn">
                    暂无数据
                  </div>
                </div>
              </div>
              <div class="demo">
                <div class="title">
                  <div style="padding: 10px 20px;color: rgba(255, 255, 255, 1);font-size: 16px;font-weight: 400;"
                       @click="studyLearn">最近在学
                  </div>
                </div>
                <div class="content-span">
                  <div v-if="learnContent && learnContent.chapLogs && learnContent.chapLogs.length">
                    <p @click="toRecentStudyStudy(item)" v-for="item in learnContent.chapLogs">
                      {{ item.chapterName }}
                    </p>
                  </div>
                  <div v-else class="not-learn">
                    暂无数据
                  </div>
                </div>
              </div>
              <div class="demo">
                <div class="title">
                  <div style="padding: 10px 20px;color: rgba(255, 255, 255, 1);font-size: 16px;font-weight: 400;"
                       @click="studyExercise">最近在练
                  </div>
                </div>
                <div class="content-span">
                  <div v-if="learnContent && learnContent.testPaperLog && learnContent.testPaperLog.length">
                    <p @click="toRecentStudyExercise(item)" v-for="(item,index) in learnContent.testPaperLog"
                       :key="index">
                      {{ item.name }}
                    </p>
                  </div>
                  <div v-else class="not-learn">
                    暂无数据
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="right-model">
              <el-carousel v-if="bannerList && bannerList.length" autoplay trigger="click" height="360px">
                <el-carousel-item v-for="item in bannerList">
                  <img class="banner-img" style="width: 100%;"
                       :src="item.bannerPicWeb ? item.bannerPicWeb:item.bannerPic" alt="">
                </el-carousel-item>
              </el-carousel>
              <el-empty v-else description="暂无数据" :image-size="200"
                        style="width: 100%;height: 360px;border: 1px solid #dcdfe6"/>
              <div class="small-model">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-card shadow="never" @click="toMyCourse"
                             :body-style="{padding:'1rem',backgroundColor:'rgba(255, 102, 26, 0.05)',cursor:'pointer'}">
                      <div class="small-model-content">
                        <div class="left-small-img">
                          <img src="../assets/index/mycourse.png" alt="">
                        </div>
                        <div class="left-small-text">
                          <p>我的课程</p>
                          <p style="font-size: 0.75rem;cursor: pointer">资深专家 亲传授课</p>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="6">
                    <el-card shadow="never" @click="toQuestionBank"
                             :body-style="{padding:'1rem',backgroundColor:'rgba(209, 231, 255, 0.33)',cursor:'pointer'}">
                      <div class="small-model-content">
                        <div class="left-small-img">
                          <img src="../assets/index/myquestion.png" alt="">
                        </div>
                        <div class="left-small-text">
                          <p>我的题库</p>
                          <p style="font-size: 0.75rem;cursor: pointer">真题演练 模拟考试</p>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col v-if="course_info.istTrain" :span="6">
                    <el-card shadow="never" @click="toQuestionBank"
                             :body-style="{padding:'1rem',backgroundColor: 'rgba(229, 248, 244, 0.6)',cursor:'pointer'}">
                      <div class="small-model-content">
                        <div class="left-small-img">
                          <img src="../assets/index/shixun.png" alt="">
                        </div>
                        <div class="left-small-text">
                          <p>实训平台</p>
                          <p style="font-size: 0.75rem;cursor: pointer">实战演练 高效学习</p>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col v-if="course_info.istCompetitionApply" :span="6">
                    <el-card shadow="never" @click="toRegisterPick"
                             :body-style="{padding:'1rem',backgroundColor:'rgba(121, 132, 226, 0.1)',cursor:'pointer'}">
                      <div class="small-model-content">
                        <div class="left-small-img">
                          <img src="../assets/index/bisai.png" alt="">
                        </div>
                        <div class="left-small-text">
                          <p>比赛报名</p>
                          <p style="font-size: 0.75rem;cursor: pointer">职业技能 竞赛报名</p>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-show="!isIndex">
        <!--        {{bannerList}}-->
        <div class="block text-center" m="t-4">
          <el-carousel v-if="bannerList && bannerList.length" autoplay trigger="click" height="467px">
            <el-carousel-item v-for="item in bannerList">
              <el-image class="banner-img" :src="item.bannerPicWeb ? item.bannerPicWeb:item.bannerPic">
              </el-image>
            </el-carousel-item>
          </el-carousel>
          <el-empty v-else description="暂无数据" :image-size="300"
                    style="width: 100%;height: 467px;border: 1px solid #dcdfe6"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {Picture as IconPicture} from '@element-plus/icons-vue'
import {onMounted, ref, reactive} from "vue";
import router from "@/router";
import {toRefs} from "@vue/reactivity";
import {recentLatelyLearn} from "../api/api";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "Banner",
  props: {
    isIndex: {
      type: Boolean,
      default: true
    },
    courseList: {
      type: Array,
      default: []
    },
    bannerList: {
      type: Array,
      default: []
    },
    learnContent: {
      type: Object,
      default: {}
    },
    course_info: {
      type: Object,
      default: {}
    }
  },
  setup(props, {emit}) {

    let data = reactive({
      mockForm: {
        exam_code: '*********',
        card_id: '*********'
      }
    })

    //轮播图绑定下标
    let BannerIndex = ref(0)
    //当前课程
    let activeCourseId = ref(0);
    console.log('当前课程id', window.localStorage.getItem('activeCourse'))
    console.log(window.localStorage.getItem('activeCourse'))
    activeCourseId.value = String(window.localStorage.getItem('activeCourse'))

    //切换课程
    let changeCourse = (courseId) => {
      console.log('切换课程')
      window.localStorage.setItem('activeCourse', courseId)
      emit('changeCourse', {courseId: courseId});
    }

    let value = ref('')
    //跳转题库
    const toQuestionBank = () => {
      router.push({path: '/AccountList'})
    }
    //跳转至网课
    const toMyCourse = () => {
      router.push({name: 'MyCourseAccount'})
    }

    //跳转至最近学习
    let toRecentStudyWatch = (item) => {
      console.log(item)
      router.push({
        name: 'VideoPlayer',
        params: {
          subject_id: localStorage.getItem('activeCourse'),
          subject_name: localStorage.getItem('activeCourseName'),
          id: item.id,
          chapterID: item.subjectID
        }
      })
    }

    let studyWatch = () => {
      router.push({name: 'RecentStudy', params: {activeName: 'recentWatch'}})
    }

    let studyLearn = () => {
      router.push({name: 'RecentStudy', params: {activeName: 'recentStudy'}})
    }

    let toRecentStudyStudy = (item) => {
      router.push({name: 'ChapterHistory', params: {id: item.id, state: item.state}})
    }

    let studyExercise = () => {
      router.push({name: 'RecentStudy', params: {activeName: 'recentExercise'}})
    }

    let toRegisterPick = () => {
      ElMessageBox.confirm(
          '比赛报名尚未开始，敬请期待',
          '比赛报名',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {

          })
          .catch(() => {

          })
    }

    let toRecentStudyExercise = (item) => {
      router.push({
        name: "MockExam",
        params: {
          subject_name: localStorage.getItem('activeCourseName'),
          id: item.id,
          exam_code: data.mockForm.exam_code,
          card_id: data.mockForm.card_id,
          method: "testPaperDetailLog",
          fraction: item.fraction == null ? "null" : item.fraction,
          scopeTime: item.scopeTime,
          exam_name: item.name
        },
      });
    }

    return {
      toRegisterPick,
      studyExercise,
      studyLearn,
      studyWatch,
      toRecentStudyWatch,
      toRecentStudyStudy,
      toRecentStudyExercise,
      // learnContent,
      toMyCourse,
      value,
      toQuestionBank,
      activeCourseId,
      changeCourse,
      BannerIndex
    }
  }
}
</script>

<style scoped>
.course-type-select{
  width: 370px;
}
.left-small-text :first-child {
  font-weight: bold;
}

.left-small-text p {
  line-height: 20px;
}

.content-span {
  padding: 10px 30px;
}

.content-span p {
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(181, 185, 189, 1);
  cursor: pointer;
}

.content-span p:hover {
  color: #409eff !important;
}

.not-learn {
  font-size: 12px;
  color: rgba(181, 185, 189, 1);
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.banner {
  width: 100%;
  background-color: white;
  margin-top: 2.125rem;
  margin-bottom: 20px;
}

.banner-img {
  width: 100%;
  border-radius: 5px;
}

.banner .content {
  width: 1200px;
  margin: 0 auto;
}

.selectCourse {
  margin-top: 1.5625rem;
  margin-bottom: 0.9375rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.banner-body {
  width: 100%;
}

.left-model {
  height: 100%;
  background-color: rgba(33, 48, 64, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 5px;
}

.left-model .demo {
  width: 100%;
  flex: 1;
}

.left-model .demo .title {
  width: 100%;
  border-bottom: 1px solid rgba(19, 35, 53, 1);
  cursor: pointer;
}

.left-model .demo .content {
  padding: 5px 20px;
  color: rgba(181, 185, 189, 1);
  font-size: 14px;
  font-weight: 400;
}

.right-model {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.small-model {
  width: 100%;
}

.left-small-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /*background-color: rgba(245, 120, 84, 1);*/
  margin-right: 1rem;
}

.small-model-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

</style>
